<template>
  <div>
    <base-header :activeIndex="activeIndex"></base-header>
    <canvas
      id="canvas"
      class="my-canvas"
      :style="{ display: showDiv }"
    ></canvas>
    <div id="home">
      <div class="top-background" :style="{ display: showDiv }">
        <p class="top-title">1231232</p>
        <p class="scroll-content">{{ content }}</p>
      </div>

      <el-container class="bottom-background">
        <router-view class="me-container" />
        <base-footer v-show="footerShow"></base-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import BaseFooter from "@/components/BaseFooter";
import BaseHeader from "@/views/BaseHeader";

export default {
  name: "Home",
  data() {
    return {
      activeIndex: "/",
      footerShow: true,
      content: "",
      contentIndex: 1,
      allContent: "测试文字内容区域在这,请注意查看我的内容,欢迎光临,谢谢惠顾。",
      showDiv: "block"
    };
  },
  components: {
    "base-header": BaseHeader,
    "base-footer": BaseFooter
  },
  updated() {
    if (this.$router.history.current.path === "/") {
      this.showDiv = "block";
    } else {
      this.showDiv = "none";
    }
  },
  mounted() {
    setInterval(() => {
      this.content = this.allContent.slice(0, this.contentIndex);
      this.contentIndex++;
      this.contentIndex %= this.allContent.length + 1;
    }, 300);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.activeIndex = to.path;
    });
  },
  beforeRouteUpdate(to, from, next) {
    if (to.path == "/") {
      this.footerShow = true;
    } else {
      this.footerShow = false;
    }
    this.activeIndex = to.path;
    next();
  }
};
</script>

<style>
#home {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: -1;
}
.my-canvas {
  width: calc(100vw - 30px);
  height: 700px;
}
.me-container {
  margin: 100px auto 140px;
  position: relative;
  z-index: 9;
}
.top-background {
  background-image: url("");
  background-size: cover;
  width: 100%;
  height: 700px;
  position: relative;
}
.top-title {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -30%);
  color: white;
  font-size: 50px;
  background-color: transparent;
  border: 2px solid white;
  font-weight: 400;
  padding: 10px;
  margin-top: -200px;
}

.scroll-content {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 25px;
  color: white;
  width: 500px;
  height: 100px;
  text-align: center;
  margin-top: 20px;
  letter-spacing: 2px;
}
.bottom-background {
  background-image: url("");
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}
</style>
